<script setup>
import { Page } from '@vben/common-ui';
import { updatePreferences } from '@vben/preferences';
import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@vben/stores';
import { requestClient } from '#/api/request.js';
import { Col, Row, Select } from 'ant-design-vue';
import useDraw from '../useDraw.js';
import allOrganizational from './components/allOrganizational.vue'
import screeningOrganize from './components/screeningOrganize.vue'
import TopRightTop from './components/topRightTop.vue'
import BottomLeft from './components/bottomLeft.vue'
import BottomRight from './components/bottomRight.vue'
import TopRightBottom from './components/topRightBottom.vue'
import TopRightBottom1 from './components/topRightBottom1.vue'
import TopLeftTop from './components/topLeftTop.vue'


const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw();
const router = useRouter();
const userStore = useUserStore();

// 判断是否是管理员
const isAdmin = computed(() => {
  return userStore.$state.userRoles?.some(role => role === 'superadmin');
});
// 企业列表
let userList = ref([])
// 接口加载状态
let loading = ref(false)
// 企业ID
let enterpriseId = ref(null)
// 组织列表
let orgList = ref([])
// 标题
let title = ref('京彩E家人小程序数据分析')
// 使用情况数据(全部)
let usageSituationData = ref([])
// 使用情况切换状态
let usageSituationFlag = ref(true)
// 使用情况类型数据
let usageSituationTypeData = ref([
  { label: '登陆人数', value: 1 },
  { label: '累计登录次数', value: 2 },
  { label: '协会数量', value: 3 },
  { label: '发起活动数量', value: 4 },
  { label: '累计点击量', value: 5 },
  { label: '论坛发布量', value: 6 }
])

// 使用情况(筛选)组织
let usageSituationType = ref(1)
// 使用情况(筛选)数据
let usageSituationDataFilter = ref([])
// 协会数量数据
let associationsCountData = ref([])
// 使用情况各协会
let usageVariousAssociationsData = ref([])
//积分排行组织
let pointsRankingDataOrg = ref(0)
// 积分排行数据
let pointsRankingData = ref([])
// 荣誉原地数据
let honorGardenData = ref([])
// 协会分类切换状态
let associationClassificationFlag = ref(true)
// 协会分类全部数据
let associationClassificationAllData = ref([])
// 协会分类组织数据
let associationClassificationOrgData = ref([])
// 积分排行类型  :基层个人 2:协会排3:全行个人 4:基层工会
let pointsRankingTypes = ref(['基层个人', '协会排行', '全行个人', '基层工会'])
const currentPointsRankingType = ref(0);
// 积分排行数据
let pointsRankingZoomData = ref([])
// 积分排行组织
let pointsRankingZoomOrg = ref(0)

let setTimeOutTimer = ref(86400000)

// 定时器句柄
const timerHandles = {
  usageSituation: null,
  usageSituationFilter: null,
  associationsCount: null,
  usageVariousAssociations: null,
  pointsRanking: null,
  honorGarden: null,
  associationClassificationAll: null,
  pointsRankingZoom: null,
};
// 清除所有定时器
function clearAllTimers() {
  Object.keys(timerHandles).forEach(key => {
    if (timerHandles[key]) {
      clearTimeout(timerHandles[key]);
      timerHandles[key] = null;
    }
  });
}
// 启动指定接口的定时器
function startTimer(key, fn) {
  if (timerHandles[key]) clearTimeout(timerHandles[key]);
  timerHandles[key] = setTimeout(() => {
    fn();
    startTimer(key, fn); // 递归定时
  }, setTimeOutTimer.value);
}

// 接口区域
// 获取积分排行数据
const getPointsRankingZoomData = async () => {
  let params = {
    type: currentPointsRankingType.value + 1,
  }
  if (currentPointsRankingType.value === 0 || currentPointsRankingType.value === 1) 
  params.subOrg = pointsRankingZoomOrg.value===0? pointsRankingZoomOrg.value= '1615977483356221441':pointsRankingZoomOrg.value
  // 如果是管理员且选择了企业，添加企业ID参数
  if (isAdmin.value && enterpriseId.value) {
    params.enterpriseId = enterpriseId.value;
  }
  const res = await requestClient.post('/smallProgram/leaderBoardTable', params)
  pointsRankingZoomData.value = res.dataList
}

// 获取协会分类全部数据
const getAssociationClassificationData = async () => {
  let params = {}
  // 如果是管理员且选择了企业，添加企业ID参数
  if (isAdmin.value && enterpriseId.value) {
    params.enterpriseId = enterpriseId.value;
  }
  const res = await requestClient.get('/smallProgram/AssociationClassByType/1', { params })
  // 处理返回的数据
  const res2 = await requestClient.get('/smallProgram/AssociationClassByType/2', { params })
  associationClassificationAllData.value = res
  associationClassificationOrgData.value = res2
}
// 获取荣誉原地的数据
const getHonorGardenData = async () => {
  let params = {}
  // 如果是管理员且选择了企业，添加企业ID参数
  if (isAdmin.value && enterpriseId.value) {
    params.enterpriseId = enterpriseId.value;
  }
  const res = await requestClient.get('/smallProgram/HonorYard', { params })
  // 处理返回的数据
  honorGardenData.value = {
    totalHonor: res.totalHonor, // 保存 totalHonor 字段
    organizationHonorData: res.organizationHonorData.map(item => ({
      value: item.honorCount,
      name: item.name
    }))
  };
}
// 获取积分排行数据
const getPointsRankingData = async () => {
  let params = {}
  // 如果是管理员且选择了企业，添加企业ID参数
  if (isAdmin.value && enterpriseId.value) {
    params.enterpriseId = enterpriseId.value;
  }
  const res = await requestClient.get('/smallProgram/integralTrend/' + pointsRankingDataOrg.value, { params })
  pointsRankingData.value = res.seriesData;
}
//获取使用情况(各协会)
const getUsageVariousAssociationsData = async () => {
  let params = {}
  // 如果是管理员且选择了企业，添加企业ID参数
  if (isAdmin.value && enterpriseId.value) {
    params.enterpriseId = enterpriseId.value;
  }
  const res = await requestClient.get('/smallProgram/useOrg', { params })
  usageVariousAssociationsData.value = res.data;
}
// 获取协会数量数据
const getAssociationsCountData = async () => {
  let params = {}
  // 如果是管理员且选择了企业，添加企业ID参数
  if (isAdmin.value && enterpriseId.value) {
    params.enterpriseId = enterpriseId.value;
  }
  const res = await requestClient.get('/smallProgram/AssociationNumber', { params })
  associationsCountData.value = res.data;
}
// 获取使用情况(筛选)数据
const getUsageSituationDataFilter = async () => {
  let params = {
  }
  // 如果是管理员且选择了企业，添加企业ID参数
  if (isAdmin.value && enterpriseId.value) {
    params.enterpriseId = enterpriseId.value;
  }
  const res = await requestClient.get('/smallProgram/useInfo/' + usageSituationType.value, { params })
  usageSituationDataFilter.value = res;
}
// 获取使用情况数据
const getUsageSituationData = async () => {
  let params = {

  }
  // 如果是管理员且选择了企业，添加企业ID参数
  if (isAdmin.value && enterpriseId.value) {
    params.enterpriseId = enterpriseId.value;
  }
  const res = await requestClient.get('/smallProgram/allUse', { params })
  usageSituationData.value = res.data
}
// 获取用户列表
const getUserList = async () => {
  const res = await requestClient.get('/system/user/list');
  userList.value = res.rows.filter((item) => item.userId !== 1);
};
// 获取组织列表
const getOrgList = async () => {
  let params = {};
  if (isAdmin.value && enterpriseId.value) {
    params.enterpriseId = enterpriseId.value;
  }
  const res = await requestClient.get('/smallProgram/getOrgList', { params })
  orgList.value = [
    { value: 0, label: '全部' },
    ...res.orgList.map((org) => ({
      value: org.orgId,
      label: org.orgName,
    })),
  ];
}

// 积分排行切换类型 
const changePointsRankingType = (index) => {
  clearTimeout(timerHandles.pointsRankingZoom);
  currentPointsRankingType.value = index;
  getPointsRankingZoomData()
  startTimer('pointsRankingZoom', getPointsRankingZoomData);
};

// 积分排行切换组织
const changePointsRankingZoomOrg = () => {
  clearTimeout(timerHandles.pointsRankingZoom);
  getPointsRankingZoomData()
  startTimer('pointsRankingZoom', getPointsRankingZoomData);
}
// 协会分类切换Flage
const changeAssociationClassificationFlag = () => {
  clearTimeout(timerHandles.associationClassificationAll);
  associationClassificationFlag.value = !associationClassificationFlag.value;
  getAssociationClassificationData()
  startTimer('associationClassificationAll', getAssociationClassificationData);
}
// 积分趋势切换组织
const changePointsRankingDataOrg = () => {
  clearTimeout(timerHandles.pointsRanking);
  getPointsRankingData()
  startTimer('pointsRanking', getPointsRankingData);
}
// 使用情况切换组织
const changeUsageSituationType = () => {
  clearTimeout(timerHandles.usageSituation);
  getUsageSituationDataFilter()
  startTimer('usageSituationFilter', getUsageSituationDataFilter);
}
// 使用情况切换组织Flag
const changeUsageSituationFlag = () => {
  usageSituationFlag.value = !usageSituationFlag.value;
  clearTimeout(timerHandles.usageSituationFilter);
  clearTimeout(timerHandles.usageSituation);
  getUsageSituationData()
  startTimer('usageSituation', getUsageSituationData);
  getUsageSituationDataFilter()
  startTimer('usageSituationFilter', getUsageSituationDataFilter);
}
// 切换企业
const handleEnterpriseChange = async () => {
  await getOrgList();
  initAPI();
}
// 是否获取企业列表
const isGetEnterpriseListHandler = async () => {
  if (isAdmin.value) {
    await getUserList();
    enterpriseId.value = userList?.value[0]?.enterpriseId;
  }
};
// 初始化页面调用接口
const initAPI = async () => {
  clearAllTimers();
  await getUsageSituationData()
  await Promise.all([
    getUsageSituationDataFilter(),
    getAssociationsCountData(),
    getUsageVariousAssociationsData(),
    getPointsRankingData(),
    getHonorGardenData(),
    getAssociationClassificationData(),
    getPointsRankingZoomData(),
  ])
  startTimer('usageSituation', getUsageSituationData);
  startTimer('usageSituationFilter', getUsageSituationDataFilter);
  startTimer('associationsCount', getAssociationsCountData);
  startTimer('usageVariousAssociations', getUsageVariousAssociationsData);
  startTimer('pointsRanking', getPointsRankingData);
  startTimer('honorGarden', getHonorGardenData);
  startTimer('associationClassificationAll', getAssociationClassificationData);
  startTimer('pointsRankingZoom', getPointsRankingZoomData);
}
// 初始化页面配置
const pageInitializeHandler = async () => {
  calcRate();
  windowDraw();
  window.addEventListener('keydown', handleEscKeydown);
  await updateScreenPreferences('full');
}
// 按esc键退出
const handleEscKeydown = (event) => {
  if (event.key === 'Escape') {
    router.back();
    updateScreenPreferences('default');
  }
}
// 页面配置方法
const updateScreenPreferences = async (mode) => {
  return updatePreferences({
    app: { layout: mode === 'full' ? 'full-content' : 'sidebar-nav' },
    header: { enable: mode !== 'full' },
    sidebar: { collapsed: mode === 'full' },
    tabbar: { enable: false },
  });
}
onMounted(async () => {
  loading.value = true
  await isGetEnterpriseListHandler()
  await getOrgList()
  await initAPI()
  nextTick(() => {
    if (appRef.value) {
      pageInitializeHandler()
    }
  });
  loading.value = false
})
// 页面卸载时清除所有定时器
onUnmounted(() => {
  clearAllTimers();
  window.removeEventListener('keydown', handleEscKeydown);
  // unWindowDraw();
});
</script>

<template>
  <Page :auto-content-height="true" class="map-container">
    <div id="map-box" ref="appRef">
      <div class="bg">
        <dv-loading v-if="loading">Loading...</dv-loading>
        <div v-else style="width: 100%; height: 100%">
          <div class="header">
            <div class="move-line"></div>
            <div class="header-title">{{ title }}</div>
            <img class="header-bg" src="../../../assets/header-04.png" />
            <div style="position: absolute;top: 2px;">
              <div class="scifi-select">
                <Select style="width: 120px;" v-if="isAdmin" v-model:value="enterpriseId" placeholder="请选择企业"
                  @change="handleEnterpriseChange" class="custom-select" dropdownClassName="scifi-select-dropdown">
                  <Select.Option v-for="org in userList" :key="org.userId" :value="org.enterpriseId">
                    {{ org.nickName }}
                  </Select.Option>
                </Select>
              </div>
            </div>
          </div>
          <Row :gutter="[10, 10]" style="height: calc(100% - 60px); padding: 10px 0">
            <Col :span="24" class="h-2/3">
            <Row :gutter="10" style="width: 100%; height: 100%;">
              <Col :span="6">
              <dv-border-box-12 class="box">
                <div class="header-box">
                  <div class="title">积分排行榜</div>
                  <div class="tab-container">
                    <div v-for="(tab, index) in pointsRankingTypes" :key="index" class="tab-item"
                      :class="[{ active: currentPointsRankingType === index }]" @click="changePointsRankingType(index)">
                      {{ tab }}
                    </div>
                  </div>
                </div>
                <div v-if="currentPointsRankingType === 0 || currentPointsRankingType === 1"
                  class="flex justify-end pr-4">
                  <div class="flex items-center gap-4">
                    <div class="scifi-select">
                      <Select style="width: 120px;" v-model:value="pointsRankingZoomOrg" placeholder="请选择组织"
                        @change="changePointsRankingZoomOrg" class="custom-select"
                        dropdownClassName="scifi-select-dropdown">
                        <Select.Option v-for="org in orgList" :key="org.value" :value="org.value">
                          {{ org.label }}
                        </Select.Option>
                      </Select>
                    </div>
                  </div>
                </div>
                <TopLeftTop :currentPointsRankingType="currentPointsRankingType"
                  :pointsRankingZoomData="pointsRankingZoomData" />
              </dv-border-box-12>
              <dv-border-box-12 class="box">
                <div class="flex items-center justify-between p-4">
                  <div class="text-lg text-white">荣誉原地({{ honorGardenData.totalHonor }}) </div>
                </div>
                <TopRightTop :associationsCountData="honorGardenData.organizationHonorData" />
              </dv-border-box-12>
              </Col>
              <Col :span="12">
              <dv-border-box-13 class="bottom-right-chart">
                <div class="mb-2 flex items-center justify-between p-4">
                  <div class="text-lg text-white">
                    {{ usageSituationFlag ? '使用情况(全部)' : '使用情况(各级组织)' }}
                  </div>
                  <div class="flex items-center gap-4">
                    <div v-if="!usageSituationFlag" class="scifi-select">
                      <Select style="width: 120px;" v-model:value="usageSituationType" placeholder="请选择组织"
                        @change="changeUsageSituationType" class="custom-select"
                        dropdownClassName="scifi-select-dropdown">
                        <Select.Option v-for="org in usageSituationTypeData" :key="org.value" :value="org.value">
                          {{ org.label }}
                        </Select.Option>
                      </Select>
                    </div>
                    <div @click="changeUsageSituationFlag" class="toggle-switch"
                      :class="{ active: !usageSituationFlag }">
                      切换图表
                    </div>
                  </div>
                </div>
                <allOrganizational v-show="usageSituationFlag" :usageSituationData="usageSituationData" />
                <screeningOrganize v-show="!usageSituationFlag" :usageSituationDataFilter="usageSituationDataFilter" />
              </dv-border-box-13>
              </Col>
              <Col :span="6">
              <dv-border-box-12 class="box">
                <div class="flex items-center justify-between p-4">
                  <div class="text-lg text-white">协会数量 </div>
                </div>
                <TopRightTop :associationsCountData="associationsCountData" />
              </dv-border-box-12>
              <dv-border-box-12 class="box">
                <div class="flex items-center justify-between p-4">
                  <div class="text-lg text-white">
                    {{ associationClassificationFlag ? '协会分类(全部)' : '协会分类(各级组织)' }}
                  </div>
                  <div class="flex items-center gap-4">
                    <div @click="changeAssociationClassificationFlag" class="toggle-switch"
                      :class="{ active: !associationClassificationFlag }">
                      切换图表
                    </div>
                  </div>
                </div>
                <TopRightBottom :associationClassificationAllData="associationClassificationAllData"
                  v-show="associationClassificationFlag" />
                <TopRightBottom1 v-show="!associationClassificationFlag"
                  :associationClassificationOrgData="associationClassificationOrgData" />
              </dv-border-box-12>
              </Col>
            </Row>
            </Col>
            <Col :span="24" class="h-1/3">
            <Row :gutter="10" style="width: 100%; height: 100%;">
              <Col :span="12">
              <dv-border-box-13 class="bottom-right-chart">
                <div class="flex items-center justify-between p-4">
                  <div class="text-lg text-white">使用情况(各协会) </div>
                </div>
                <BottomLeft :usageVariousAssociationsData="usageVariousAssociationsData" />
              </dv-border-box-13>
              </Col>
              <Col :span="12">
              <dv-border-box-13 class="bottom-right-chart">
                <div class=" flex items-center justify-between p-4">
                  <div class="text-lg text-white">积分趋势 </div>
                  <div class="flex items-center gap-4">
                    <div class="scifi-select">
                      <Select style="width: 120px;" v-model:value="pointsRankingDataOrg" placeholder="请选择组织"
                        @change="changePointsRankingDataOrg" class="custom-select"
                        dropdownClassName="scifi-select-dropdown">
                        <Select.Option v-for="org in orgList" :key="org.value" :value="org.value">
                          {{ org.label }}
                        </Select.Option>
                      </Select>
                    </div>
                  </div>
                </div>
                <BottomRight :pointsRankingData="pointsRankingData" />
              </dv-border-box-13>
              </Col>
            </Row>
            </Col>
          </Row>
        </div>
      </div>
    </div>
  </Page>
</template>


<style lang="scss" scoped>
.header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px 0 10px;
  margin-bottom: 10px;

  .title {
    color: #fff;
    font-size: 16px;
    margin-bottom: 16px;
    margin: 5px 0;
    text-align: center;
  }

  .tab-container {
    display: flex;
    gap: 5px;

    .tab-item {
      color: #fff;
      cursor: pointer;
      padding: 5px 5px;
      border-radius: 4px;
      transition: all 0.3s;
    }

    .tab-item:hover {
      background: rgba(65, 194, 240, 0.3);
    }

    .tab-item.active {
      background: rgba(65, 194, 240, 0.7);
    }
  }
}

.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: 8px 22px;
  border-radius: 24px;
  background: linear-gradient(135deg,
      rgba(0, 30, 60, 0.7),
      rgba(0, 20, 40, 0.9));
  border: 1px solid rgba(0, 200, 255, 0.4);
  box-shadow:
    0 0 15px rgba(0, 200, 255, 0.4),
    inset 0 0 8px rgba(0, 150, 255, 0.2);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.17, 0.67, 0.83, 0.67);
  text-shadow: 0 0 8px rgba(0, 220, 255, 0.8);
  color: rgba(220, 240, 255, 0.9);
  font-weight: 500;
  letter-spacing: 1px;
  overflow: hidden;
  z-index: 1;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(0, 200, 255, 0.1),
        transparent);
    transform: translateX(-100%);
    animation: scanning 3s infinite;
    z-index: -1;
  }

  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 10px;
    width: 6px;
    height: 6px;
    background-color: rgba(0, 220, 255, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 10px 2px rgba(0, 220, 255, 0.6);
    transform: translateY(-50%);
    opacity: 0.8;
    transition: all 0.3s ease;
  }

  &:hover {
    background: linear-gradient(135deg,
        rgba(0, 40, 80, 0.8),
        rgba(0, 30, 60, 1));
    border-color: rgba(0, 220, 255, 0.6);
    box-shadow:
      0 0 25px rgba(0, 220, 255, 0.5),
      inset 0 0 12px rgba(0, 180, 255, 0.3);
    text-shadow: 0 0 12px rgba(0, 220, 255, 1);
    transform: translateY(-2px);
  }

  &:active {
    transform: scale(0.96) translateY(0);
    box-shadow:
      0 0 30px rgba(0, 220, 255, 0.6),
      inset 0 0 15px rgba(0, 180, 255, 0.4);
  }

  // 开关状态样式差异
  &:not(:hover)::after {
    animation: pulse 2s infinite;
  }

  // 开启状态特殊样式
  &.active {
    background: linear-gradient(135deg,
        rgba(0, 60, 100, 0.8),
        rgba(0, 40, 80, 1));
    border-color: rgba(0, 255, 220, 0.6);
    box-shadow:
      0 0 20px rgba(0, 255, 220, 0.5),
      inset 0 0 10px rgba(0, 255, 200, 0.3);

    &::after {
      left: auto;
      right: 10px;
      background-color: rgba(0, 255, 220, 0.8);
      box-shadow: 0 0 10px 2px rgba(0, 255, 220, 0.6);
    }
  }
}

.box {
  width: 100%;
  height: 50%;
}

.chart-header {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-radius: 4px;
}


.chart-types {
  display: flex;
  gap: 20px;

  .chart-type-item {
    position: relative;
    padding: 8px 16px;
    overflow: hidden;
    font-size: 14px;
    color: rgb(0 242 254 / 70%);
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: all 0.3s ease;

    &::before {
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 2px;
      content: '';
      background: linear-gradient(90deg, transparent, rgb(0 242 254 / 80%));
      transition: 0.5s;
    }

    &:hover {
      color: rgb(0 242 254 / 100%);
      border-color: rgb(0 242 254 / 30%);
      box-shadow: 0 0 10px rgb(0 242 254 / 10%);

      &::before {
        left: 100%;
      }
    }

    &.active {
      color: #fff;
      background: linear-gradient(90deg,
          rgb(0 242 254 / 30%) 0%,
          rgb(0 242 254 / 10%) 100%);
      border-color: rgb(0 242 254 / 50%);
      box-shadow: 0 0 15px rgb(0 242 254 / 20%);
    }
  }
}

.map-container {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  margin: 0 !important;
  background-color: black;

  #map-box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1920px;
    height: 1080px;
    color: #d3d6dd;
    background-color: #ffebcd;
    transform: translate(-50%, -50%);
    transform-origin: left top;

    .bg {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      padding: 12px 12px 0;
      background-image: url('../../../assets/pageBg.png');
      background-position: center center;
      background-size: cover;
    }
  }
}

.header {
  position: relative;
  width: 100%;
  height: 50px;

  @keyframes move-left-to-right {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(calc(100vw - 106px));
    }
  }

  .move-line {
    position: absolute;
    bottom: -11px;
    left: 0;
    width: 106px;
    height: 28px;
    background: url('../../../assets/line-bg.png') no-repeat;
    background-size: 100% 100%;
    animation: move-left-to-right 4s linear infinite;
  }

  .header-title {
    min-width: 250px;
    margin: 0 50px;
    font-size: 20px;
    font-weight: 900;
    line-height: 2.8rem;
    color: transparent;
    text-align: center;
    letter-spacing: 4px;
    background-image: linear-gradient(92deg,
        #0072ff 0%,
        #00eaff 48.8525%,
        #01aaff 100%);
    background-clip: text;
  }

  .header-bg {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 3.84rem;
    margin: 0 auto;
  }
}


/* 科幻风 Select 样式 */
.scifi-select ::v-deep(.ant-select-selector) {
  background: linear-gradient(135deg, #0f2027 0%, #2c5364 100%);
  border: 2px solid #00ffe7;
  color: #00ffe7;
  border-radius: 8px;
  transition: border 0.3s;
}

.scifi-select ::v-deep(.ant-select-selector:hover),
.scifi-select ::v-deep(.ant-select-focused .ant-select-selector) {
  border-color: #ff00cc;
}

.scifi-select ::v-deep(.ant-select-arrow) {
  color: #00ffe7;
}

.scifi-select ::v-deep(.ant-select-dropdown) {
  background: #181c2b;
  border: 1.5px solid #00ffe7;
  min-width: 80px !important;
  width: 80px !important;
}

.scifi-select ::v-deep(.ant-select-item-option-selected) {
  background: linear-gradient(90deg, #00ffe7 0%, #ff00cc 100%);
  color: #181c2b;
}

.scifi-select ::v-deep(.ant-select-item-option-active) {
  background: rgba(0, 255, 231, 0.2);
}
</style>

<style lang="scss">
/* 简洁的下拉菜单样式 */
.scifi-select-dropdown.ant-select-dropdown {
  background: rgba(24, 36, 58, 0.95) !important;
  border: 1px solid #00eaff !important;
  border-radius: 4px !important;
  padding: 4px 0;
  min-width: 90px;
  max-width: 120px;
}

.scifi-select-dropdown .ant-select-item {
  color: rgba(0, 234, 255, 0.85) !important;
  font-size: 12px;
  font-family: 'Microsoft YaHei';
  border-radius: 2px;
  margin: 1px 2px;
  padding: 2px 6px;
  background: transparent !important;
  transition: all 0.2s;
  min-height: 22px !important;
  line-height: 1.2;
}

.scifi-select-dropdown .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
  background: rgba(0, 114, 255, 0.1) !important;
  color: #fff !important;
}

.scifi-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
  background: linear-gradient(90deg, #0072ff 0%, #00eaff 100%) !important;
  color: #fff !important;
  font-weight: 500;
}

.scifi-select-dropdown .ant-select-item-option-disabled {
  color: rgba(0, 234, 255, 0.3) !important;
  opacity: 0.6;
}

/* Select框本身的样式 */
.scifi-select ::v-deep(.ant-select-selector) {
  background: rgba(24, 36, 58, 0.8) !important;
  border: 1px solid #00eaff !important;
  border-radius: 4px !important;
  transition: all 0.3s;
  height: 28px !important;
  padding: 0 8px !important;
}

.scifi-select ::v-deep(.ant-select-selection-item) {
  color: rgba(0, 234, 255, 0.85) !important;
  font-size: 12px;
  line-height: 26px !important;
}

.scifi-select ::v-deep(.ant-select-arrow) {
  color: #00eaff;
  font-size: 12px;
}

.scifi-select ::v-deep(.ant-select-focused .ant-select-selector) {
  border-color: #00eaff !important;
}
</style>
